<template>
  <page-header-wrapper>
    <global-search :list="searchList" @search="handleSearch" @reset="handleReset"> </global-search>
    <a-card :bordered="false">
      <s-table
        ref="table"
        size="default"
        :scroll="{ x: true }"
        rowKey="ID"
        :columns="columns"
        :propertyLedger="true"
        :ableExport="false"
        :data="loadData"
        :pagination="{ showTotal: (total) => `共 ${total} 条` }"
      >
        <span slot="index" slot-scope="text, record, index">{{ index + 1 }}</span>
        <span slot="empty" slot-scope="text">{{ text || '/' }}</span>
        <a-tag :color="colorMode(text)" slot="Mode" slot-scope="text">
          {{ text }}
        </a-tag>
        <div slot="action" slot-scope="text, record">
          <a-popover placement="left">
            <template slot="content">
              <a-descriptions title="台账查看" :column="2" bordered style="width: 600px">
                <a-descriptions-item label="申请编号"> / </a-descriptions-item>
                <a-descriptions-item label="姓名"> {{ record.姓名 || '/' }} </a-descriptions-item>
                <a-descriptions-item label="身份证号"> {{ record.身份证号 || '/' }} </a-descriptions-item>
                <a-descriptions-item label="计划名称"> {{ record.计划 || '/' }} </a-descriptions-item>
                <a-descriptions-item label="所属项目"> {{ record.小区名称 || '/' }} </a-descriptions-item>
                <a-descriptions-item label="房源编号"> {{ record.安置点 || '/' }} </a-descriptions-item>
                <a-descriptions-item label="房屋性质"> {{ record.房屋性质 || '/' }} </a-descriptions-item>
                <a-descriptions-item label="当前状态">
                  <a-tag :color="colorMode(record.状态)">
                    {{ record.状态 || '/' }}
                  </a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="总面积"> {{ record.面积 || '/' }}㎡ </a-descriptions-item>
                <a-descriptions-item label="房屋结构"> {{ record.结构 || '/' }} </a-descriptions-item>
                <a-descriptions-item label="房源地址">
                  {{ `${record.地址}：${record.栋}栋${record.单元}单元${record.楼层}-${record.附号}` }}
                </a-descriptions-item>
              </a-descriptions>
            </template>
            <y-button type="link">查看</y-button>
          </a-popover>
        </div>
        <!-- <div slot="action" slot-scope="text, record">
          <y-button type="link" @click="handleDetail(record.ID)">查看</y-button>
        </div> -->
      </s-table>
    </a-card>
    <house-detail :visible.sync="visibleDetail" :houseID="houseID"></house-detail>
  </page-header-wrapper>
</template>

<script>
import { Ellipsis, houseDetail, STable } from '@/components'
// import { STable } from './STable'
import { getESitesListInfo } from '@/api/followUpManagement'
import { getHouseTypeColor } from '@/api/common'
export default {
  components: {
    STable,
    Ellipsis,
    houseDetail,
  },
  data() {
    return {
      queryParam: {
        strContent: {},
        Mode: 'all',
        DeptNO: this.$store.getters.userInfo.DeptNO,
        UserID: this.$store.getters.userid,
      },
      searchList: [
        {
          label: '计划名称',
          fields: '计划',
          type: 'input',
          props: {
            placeholder: '请输入计划名称',
          },
        },
        {
          label: '项目名称',
          fields: '项目',
          type: 'input',
          props: {
            placeholder: '请输入项目名称',
          },
        },
        {
          label: '房源编号',
          fields: '安置点',
          type: 'input',
          props: {
            placeholder: '请输入房源编号',
          },
        },
        {
          label: '栋',
          fields: '栋',
          type: 'input',
          props: {
            placeholder: '请输入栋',
          },
        },
        {
          label: '单元号',
          fields: '单元',
          type: 'input',
          props: {
            placeholder: '请输入单元号',
          },
        },
        {
          label: '楼层',
          fields: '楼层',
          type: 'input',
          props: {
            placeholder: '请输入楼层',
          },
        },
        {
          label: '附号',
          fields: '附号',
          type: 'input',
          props: {
            placeholder: '请输入附号',
          },
        },
        {
          label: '房屋状态',
          fields: '状态',
          type: 'select',
          props: {
            placeholder: '请选择房屋状态',
            options: [],
          },
        },
        {
          label: '区域名称',
          fields: '房源代码',
          type: 'select',
          props: {
            placeholder: '请选择区域名称',
            options: [
              {
                label: '南明区',
                value: '南明区',
              },
              {
                label: '云岩区',
                value: '云岩区',
              },
              {
                label: '观山湖区',
                value: '观山湖区',
              },
              {
                label: '白云区',
                value: '白云区',
              },
              {
                label: '乌当区',
                value: '乌当区',
              },
              {
                label: '花溪区',
                value: '花溪区',
              },
              {
                label: '双龙',
                value: '双龙',
              },
              {
                label: '清镇',
                value: '清镇',
              },
              {
                label: '开阳',
                value: '开阳',
              },
              {
                label: '修文',
                value: '修文',
              },
              {
                label: '息烽',
                value: '息烽',
              },
              {
                label: '贵安',
                value: '贵安',
              },
            ],
          },
        },
      ],
      columns: [
        {
          title: '序号',
          align: 'center',
          width: '80px',
          scopedSlots: { customRender: 'index' },
        },
        {
          title: '计划名称',
          align: 'center',
          dataIndex: '计划',
        },
        {
          title: '项目名称',
          align: 'center',
          dataIndex: '项目',
        },
        {
          title: '房源地址',
          align: 'center',
          dataIndex: '地址',
          customRender: (text, record) => {
            const { 栋, 单元, 楼层, 附号 } = record
            return `${text}：${栋}栋${单元}单元${楼层}-${附号}`
          },
        },
        {
          title: '房源编号',
          align: 'center',
          dataIndex: '安置点',
        },
        {
          title: '房屋结构',
          align: 'center',
          dataIndex: '结构',
        },
        {
          title: '房屋面积',
          align: 'center',
          dataIndex: '面积',
        },
        {
          title: '当前状态',
          align: 'center',
          dataIndex: '状态',
          scopedSlots: { customRender: 'Mode' },
        },
        {
          title: '操作',
          align: 'center',
          width: '80px',
          fixed: 'right',
          scopedSlots: { customRender: 'action' },
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return getESitesListInfo(requestParameters).then((res) => res)
      },
      houseID: '',
      visibleDetail: false,
      stateList: [],
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      getHouseTypeColor({
        PmKey: 'HoueTypeColor',
      }).then((res) => {
        this.stateList = res.map((e) => {
          return {
            ID: e.ID,
            value: e.PMNAME,
            label: e.PMNAME,
            color: e.PMCOLOR,
          }
        })
        this.searchList[7].props.options = this.stateList
      })
    },
    colorMode(label) {
      const element = this.stateList.find((e) => e.label === label)
      if (element) {
        return element.color
      } else {
        return '#ffc53d'
      }
    },
    handleSearch(values) {
      this.queryParam.strContent = values
      this.tableRefresh(true)
    },
    handleReset() {
      this.queryParam.strContent = {}
      this.tableRefresh(true)
    },
    tableRefresh(refresh = false) {
      this.$refs.table.refresh(refresh)
    },
    handleDetail(id) {
      this.houseID = id
      this.visibleDetail = true
    },
  },
}
</script>
<style lang="less" scoped>
.table-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/deep/ .ant-table td {
  white-space: nowrap;
}
</style>
